import 'package:flutter/material.dart';

void main()=>runApp(myapp());

class myapp extends StatelessWidget{
  @override

  // 文字网格

  // Widget build(BuildContext context){
  //   return MaterialApp(
  //     home:Scaffold(
  //       appBar: AppBar(
  //         title: new Text('网络列表'),
  //       ),
  //       body:GridView.count(
  //         padding:const EdgeInsets.all(20.0),
  //         crossAxisCount: 3, //一行显示3个
  //         crossAxisSpacing: 10.0, //间距
  //         children: <Widget>[
  //           const Text('I,m Dfei'),
  //           const Text('I,m Dfei'),
  //           const Text('I,m Dfei'),
  //           const Text('I,m Dfei'),
  //           const Text('I,m Dfei'),
  //           const Text('I,m Dfei'),
  //         ],
  //       )
  //     )
  //   );
  // }


  // 图片网格
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: new Text('图片网络表格'),
        ),
        // body:GridView.count(  //普通写法
        //   padding:const EdgeInsets.all(10.0),
        //   crossAxisCount: 3, //一行几个
        //   mainAxisSpacing: 2.0, //上下间距
        //   crossAxisSpacing: 10.0, //左右间距
        //   childAspectRatio: 0.7,  //宽高比，这个值的意思是宽是高的多少倍，如果宽是高的2倍，那我们就写2.0，如果高是宽的2倍，我们就写0.5。
        //   children: <Widget>[
        //     new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
        //      new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
        //   ],
        // )
        

        // 老的写法
        body:imageList()
      )
    );
  }
}

// 试下把列表抽离
class imageList extends StatelessWidget{
  @override

  Widget build(BuildContext context){
    return GridView(
          padding:const EdgeInsets.all(6.0),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: 2.0,
            crossAxisCount: 3,
            crossAxisSpacing: 2.0,
            childAspectRatio: 0.7,
          ),
          children: <Widget>[
            new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
          ],
        );
  }
}